import React, { useEffect, useState } from "react"
import { RouteComponentProps } from "react-router-dom"
import { get } from "@/utils/request"
import { DetailResult } from "@/models/detail-result"
import { ScoreBoard } from "./score-board"
import { FinalScreenshotCard } from "./final-screenshot"
import { Screenshots } from "./screenshots"
import { WarningAudits } from "./warning-audits"

const Detail: React.FC<RouteComponentProps<{ uuid: string }>> = ({ match }) => {
  const [data, setData] = useState<DetailResult>()

  useEffect(() => {
    get<string>("/pegasus/api/detail/", {
      uuid: match.params.uuid,
    }).then((res) => {
      const obj = JSON.parse(res.data) as DetailResult
      setData(obj)
      console.log(obj)
    })
  }, [])

  return (
    <div>
      <ScoreBoard info={data?.categories} audits={data?.audits} />
      <div className="flex">
        <FinalScreenshotCard info={data?.audits["final-screenshot"]} />
        <Screenshots info={data?.audits["screenshot-thumbnails"]} />
      </div>
      <WarningAudits info={data?.audits} />
    </div>
  )
}

export default Detail
